<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商场消防云平台 - 值班人员管理</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
        }
        .nav {
            background-color: #333;
            overflow: hidden;
            display: flex;
        }
        .nav a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        .nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .nav a.active {
            background-color: #f44336;
            color: white;
        }
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .staff-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: white;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .staff-table th, .staff-table td {
            border: 1px solid #ddd;
            padding: 12px 8px;
            text-align: left;
        }
        .staff-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .operation-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
        }
        .add-btn {
            background-color: #67c23a;
            color: white;
            margin-bottom: 10px;
        }
        .edit-btn {
            background-color: #409EFF;
            color: white;
        }
        .delete-btn {
            background-color: #f44336;
            color: white;
        }
        /* 弹窗样式 */
        .modal-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
        .modal {
            width: 500px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .modal-header {
            padding: 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
            font-weight: bold;
        }
        .modal-body {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .modal-footer {
            padding: 15px;
            background-color: #f8f9fa;
            border-top: 1px solid #ddd;
            text-align: right;
        }
        .modal-footer button {
            padding: 8px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-save {
            background-color: #409EFF;
            color: white;
        }
        .btn-cancel {
            background-color: #ccc;
            color: #333;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>商场消防云平台</h1>
    <div>
        <a href="LogoutServlet">退出登录</a>
    </div>
</div>

<div class="nav">
    <a href="main.jsp">首页</a>
    <a href="fire_alarm_list.jsp">火灾报警系统</a>
    <a href="equipment_management.jsp">消防设备管理系统</a>
    <a href="inspection_system.jsp" >设备巡检系统</a>
    <a href="video_monitoring.jsp">视频监控系统</a>
    <a href="emergency_plan.jsp">应急预案管理</a>
    <%
        String role = (String) session.getAttribute("role");
        if ("管理人员".equals(role)) {
    %>
    <a href="duty_staff.jsp" class="active">检查人员管理</a>
    <a href="system.jsp">系统管理</a>
    <% } %>
    <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
    <h2>检查人员管理</h2>
    <button class="operation-btn add-btn" onclick="showAddModal()">添加值班人员</button>

    <div id="staffTableContainer">
        <!-- 数据通过 AJAX 加载 -->
    </div>

    <!-- 添加/编辑值班人员弹窗 -->
    <div class="modal-mask" id="staffModal">
        <div class="modal">
            <div class="modal-header" id="modalTitle">添加值班人员</div>
            <div class="modal-body">
                <form id="staffForm">
                    <input type="hidden" id="editStaffId" name="id">
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="gender">性别:</label>
                        <select id="gender" name="gender">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="dutyTime">值班时间:</label>
                        <input type="datetime-local" id="dutyTime" name="dutyTime" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeModal()">取消</button>
                <button class="btn-save" onclick="submitForm()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        loadStaffList();
    });

    // 加载值班人员列表
    function loadStaffList() {
        $.get("DutyStaffServlet?action=list", function(data) {
            $("#staffTableContainer").html(data);
        }).fail(function(xhr, status, error) {
            console.error("加载数据失败:", error);
            $("#staffTableContainer").html("<p>数据加载失败，请重试</p>");
        });
    }

    // 显示添加值班人员模态框
    function showAddModal() {
        $("#modalTitle").text("添加值班人员");
        $("#staffForm")[0].reset();
        $("#editStaffId").val("");
        $("#staffModal").css("display", "flex");
    }

    // 显示编辑值班人员模态框
    function showEditModal(id) {
        $.get("DutyStaffServlet?action=get&id=" + id)
            .done(function(data) {
                try {
                    var staff = JSON.parse(data);
                    $("#modalTitle").text("编辑值班人员");
                    $("#editStaffId").val(staff.id);
                    $("#name").val(staff.name);
                    $("#gender").val(staff.gender);
                    let formattedTime = staff.dutyTime.replace(" ", "T").substring(0, 16);
                    $("#dutyTime").val(formattedTime);
                    $("#staffModal").css("display", "flex");
                } catch (e) {
                    console.error("解析JSON失败:", data);
                    alert("获取数据格式错误，请重试");
                }
            })
            .fail(function(xhr, status, error) {
                console.error("获取数据失败:", error);
                alert("获取数据失败，请重试");
            });
    }

    // 关闭模态框
    function closeModal() {
        $("#staffModal").hide();
    }

    // 提交表单（添加/编辑值班人员）
    function submitForm() {
        // 表单验证
        let name = $("#name").val();
        let gender = $("#gender").val();
        let dutyTime = $("#dutyTime").val();

        if (!name || !gender || !dutyTime) {
            alert("请填写所有必填字段");
            return;
        }

        let formData = $("#staffForm").serialize();
        let action = $("#editStaffId").val() ? "update" : "add";

        $.ajax({
            url: "DutyStaffServlet?action=" + action,
            method: "POST",
            data: formData,
            dataType: "text",
            success: function(response) {
                if (response.trim() === "success") {
                    alert("操作成功");
                    closeModal();
                    loadStaffList();
                } else {
                    alert("操作失败: " + response);
                }
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error);
                alert("网络错误，请重试 (" + error + ")");
            }
        });
    }

    // 删除值班人员
    function deleteStaff(id) {
        if (confirm("确定要删除该值班人员信息吗?")) {
            $.get("DutyStaffServlet?action=delete&id=" + id)
                .done(function(response) {
                    if (response.trim() === "success") {
                        alert("删除成功");
                        loadStaffList();
                    } else {
                        alert("删除失败: " + response);
                    }
                })
                .fail(function(xhr, status, error) {
                    console.error("删除失败:", error);
                    alert("网络错误，请重试");
                });
        }
    }
</script>
</body>
</html>